<template>
	<div class="p-4">
		<t-button @click="back()" variant="outline" class="mb-4" >返回</t-button>
		<div v-for="(item, index) in data" :key="index" class="mb-8">
			<p class="text-gray-900 text-lg mb-4">{{item[0].s_date.slice(0,4)}}年{{item[0].s_date.slice(5)}}月工资表</p>
			<t-table
			:bordered="true"
			rowKey="s_id"
			:columns="columnsYes"
			:data="item"
			></t-table>
		</div>
	</div>
</template>

<script>
	const getColumsYes = (isFixedColumn) => [
		{ colKey: 's_user_name', title: '员工昵称', fixed: 'left', width: 120, attrs:{['style']: "background-color: #f7f7f7"}},
		{ colKey: 's_department_name', title: '所属部门', width: 120},
		{ colKey: 's_position_name', title: '岗位职称', width: 120 },
		{ colKey: 's_shoud_salary', title: '满勤天数', width: 120 },
		{ colKey: 's_office_day', title: '实际出勤天数', width: 140 },
		{ colKey: 's_rest_day', title: '调休', width: 80 },
		{ colKey: 's_overtime_day', title: '加班', width: 80 },
		{ colKey: 's_post_salary', title: '岗位工资', width: 120 },
		{ colKey: 's_award', title: '绩效奖励', width: 120 },
		{ colKey: 's_fine', title: '扣款', width: 120 },
		{ colKey: 's_endowent_insurance', title: '养老保险', width: 120 },
		{ colKey: 's_medical_insurance', title: '医疗保险', width: 120 },
		{ colKey: 's_unemployment_insurance', title: '失业保险', width: 120 },
		{ colKey: 's_employment_insurance', title: '工伤保险', width: 120 },
		{ colKey: 's_maternity_insurance', title: '生育保险', width: 120 },
		{ colKey: 's_practical_salary', title: '实际应发', width: 160 },
		{ colKey: 's_remark', title: '备注', width: 200 }
	]
	
	export default {
		name: 'SalaryRecord',
		data(){
			return {
				data: [],
				fixedColumn: false,
			}
		},
		computed: {
			// 已提交表头配置
			columnsYes(){
				return getColumsYes(this.fixedColumn)
			},
		},
		methods: {
			// 返回详情页
			back(){
				this.$bus.emit('goUserDataHome')
			},
			// 获取表格基本信息
			getUserSalary(id){
				this.$store.dispatch('salary/getUserSalary', id).then(res => {
					if (res.status === 0){
						// 计算应上班天数
						res.data.map(item => {
							item.s_shoud_salary = item.s_all_day - item.s_rest_all_day
						})
						const groupBy = (array, f) => {
							let groups = {}
							array.forEach( o => {
								let group = JSON.stringify(f(o))
								groups[group] = groups[group] || []
								groups[group].push(o)
							})
							return Object.keys(groups).map((group) => {
								return groups[group]
							})
						}
						this.data = groupBy(res.data, (item) => {return item.s_date})
					} else {
						this.$bus.emit('goUserDataHome')
						this.$message.error(res.message)
					}
				})
			}
		},
		mounted(){
			this.getUserSalary(this.$route.query.id)
		}
	}
</script>

<style>
</style>